<template>
  <div class="common-layout">
    <el-container style="height: 100%">
      <el-header class="header">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo right"
          mode="horizontal"
          @select="handleOpen"
          :router="true"
        >
          <UserMenu :data="data" />
        </el-menu>
      </el-header>
      <el-main>
        <RouterView></RouterView>
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, watch } from "vue";
import { useRoute,useRouter } from "vue-router";
import UserMenu from "../../components/UserMenu.vue";

const route=useRoute()
const router=useRouter()
const data = ref([
  { id: 1, title: "我的主页", path: "/main/MyHomePage" },
  { id: 2, title: "社区", path: "/main/Community" },
  { id: 3, title: "设置", path: "/main/Setting" },
  { id: 4, title: "班级管理", path: "/main/ClassPage" },
]);
const activeIndex = ref("/main/MyHomePage");

const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};
// onMounted(() => {
  activeIndex.value = "/main/MyHomePage";
// });

watch(
  () => route.fullPath,
  (newVal) => {
    activeIndex.value = newVal;
  },
  { immediate: true, deep: true }
);
</script>
<style scoped lang="scss">
.common-layout {
  // width: 100vw;
  width: 1024px;
  min-height: 100vh;
  margin: 0 auto;
  background-color: #f0f2f5;
}
.header {
  display: flex;
  justify-content: flex-end;
  // .el-menu--horizontal.el-menu {
  //   border: none;
  // }
  .el-menu-demo {
    background-color: #f0f2f5;
  }
}
</style>
